<template>
  <Card :title="title" :loading="loading">
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Ref, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { TopItem } from '@/api/dashboard/model/data';
  import { dashboardPVTopApi } from '@/api/dashboard/dashboard';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    title: {
      type: String as PropType<string>,
      default: '热门商品',
    },
    topType: {
      type: String as PropType<string>,
      default: 'goods_detail',
    },
    // start: {
    //   type: String as PropType<string>,
    //   default: '',
    // },
    // end: {
    //   type: String as PropType<string>,
    //   default: '',
    // },
    // pieData: {
    //   type: Array as PropType<PieItem[]>,
    //   default: () => [] as PropType<PieItem[]>,
    // },
    // colors: {
    //   type: Array as PropType<string[]>,
    //   default: () => ['#5ab1ef', '#b6a2de'],
    // },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const yData = ref([]);
  const seriesData = ref([]);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  function drawTop() {
    setOptions({
      tooltip: {},
      legend: {
        show: false,
      },
      grid: {
        top: '10%',
        left: '10%',
        bottom: '3%',
        containLabel: false,
      },
      xAxis: {
        show: false,
        type: 'value',
        margin: 10,
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          margin: 10,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: false,
              margin: 20,
            },
          },
          data: yData,
          axisLabel: {
            fontSize: 14,
            // margin: -110,
            align: 'left',
            padding: [0, 0, 40, 0],
            rotate: 0,
            color: 'rgb(5,10,31)',
            // 配置序号背景
            rich: {
              a1: {
                color: '#FFD743',
                width: 30,
                height: 30,
                align: 'right',
              },
              a2: {
                color: '#4690FF',
                width: 30,
                height: 30,
                align: 'right',
              },
              a3: {
                color: '#FF8A45',
                width: 30,
                height: 30,
                align: 'right',
              },
              b: {
                width: 30,
                height: 30,
                align: 'right',
              },
            },
            formatter: function (params, index) {
              var leftIndex = index + 1;
              if (leftIndex < 4) {
                return ['{a' + leftIndex + '|' + leftIndex + '}' + ' ' + params].join('\n');
              } else {
                // return ['{b' + leftIndex + '|' + leftIndex + '}' + ' ' + params].join('\n');
                return ['{b|' + leftIndex + '}' + ' ' + params].join('\n');
              }
            },
          },
        },
      ],
      series: [
        {
          zlevel: 3,
          type: 'bar',
          barWidth: 12,
          // barCategoryGap: '80%',
          data: seriesData,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(27,46,204,0.80)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: ' #41D7FF', // 100% 处的颜色
                },
              ],
            },
            barBorderRadius: [8, 8, 8, 8],
          },
          label: {
            show: true,
            position: 'right',
            color: 'rgba(42,115,219,0.85)',
            fontSize: 14,
            offset: [10, 1],
            formatter: function (params) {
              return params.value;
            },
          },
        },
      ],
    });
  }

  function statPvSource(start, end) {
    dashboardPVTopApi(props.topType, start, end).then((data: TopItem[]) => {
      if (data && data.length > 0) {
        seriesData.value = [];
        yData.value = [];
        data.forEach(function (e) {
          seriesData.value.push(e.value);
          yData.value.push(e.name);
        });
        drawTop();
      } else {
        yData.value = [];
        seriesData.value = [];
        drawTop();
      }
    });
  }

  defineExpose({
    statPvSource,
  });

  // onMounted(() => {
  //   statPvSource();
  // });

  // watch(
  //   () => props.loading,
  //   () => {
  //     if (props.loading) {
  //       return;
  //     }
  //     statPvSource();
  //   },
  //   { immediate: true },
  // );
</script>
